<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM综合案例</title>
</head>
<body>
<img id="h1" src="off.gif"> <br><br>
<div>
    <div class="cls">杰普软件</div> <br>
    <div class="cls">Java程序员</div> <br>
</div>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<input type="button"  value="全选" id = "all">
<script>
    //点亮灯泡
    //获取灯泡元素
    var oImg  = document.getElementById('h1');
    //绑定一个点击事件
    oImg.onclick = function (){
        //判断src里是off还是on
        if(oImg.src.indexOf('off')!=-1){
            oImg.src = 'on.gif';
        }else{
            oImg.src = 'off.gif';
        }
    }


//先获取div标签
    var oDivs = document.getElementsByClassName("cls");
    var oDivAll = document.getElementsByTagName('div');
    var vertGood = function () {

        //遍历
        for (var oDiv of oDivs) {
            //先获取原来的值
            var sValue = oDiv.innerHTML;
            var appendString = '<span style="color:red">very good<\span>';
            oDiv.innerHTML = sValue.concat(appendString);
        }
    }
    oDivAll[0].onmouseover = vertGood;
    oDivAll[0].style.width = 200+"px";



    //一键全选
   var oBtn =  document.getElementById("all");

   oBtn.onclick =  function  all(){
        //获取所有复选框
        var oInputs = document.getElementsByName("hobby");
        oInputs.forEach(function (value){
            value.checked = true;
        });
    }

</script>

</body>
</html>